<div class="box box-solid box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">{{modal.header}}</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal" name="userForm">
        <div class="box-body">
            <div class="form-group has-feedback" ng-class="{'has-success' : !userForm.username.$pristine && userForm.username.$valid,
            'has-error' : !userForm.username.$pristine && userForm.username.$invalid}">
                <label for="username" class="col-sm-2 control-label">用户名</label>

                <div class="col-sm-8">
                    <input type="text" class="form-control" required ng-maxlength=12 ng-minlength=6
                           ng-model="modal.username" name="username"
                           id="username" placeholder="用户名">

                    <div ng-show="!userForm.username.$pristine && userForm.username.$valid">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span><label class="control-label">验证通过</label>
                    </div>
                    <div ng-show="!userForm.username.$pristine && userForm.username.$invalid">
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span><label class="control-label">密码必须大于6位并小于12位</label>
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback" ng-class="{'has-success' : !userForm.nickName.$pristine && userForm.nickName.$valid,
            'has-error' : !userForm.nickName.$pristine && userForm.nickName.$invalid}">
                <label for="nickName" class="col-sm-2 control-label">姓名</label>

                <div class="col-sm-8">
                    <input type="text" class="form-control" id="nickName" name="nickName" required ng-maxlength=12 ng-minlength=2
                           ng-model="modal.nickName" placeholder="姓名">
                    <div ng-show="!userForm.nickName.$pristine && userForm.nickName.$valid">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span><label class="control-label">验证通过</label>
                    </div>
                    <div ng-show="!userForm.nickName.$pristine && userForm.nickName.$invalid"><label class="control-label">姓名必须大于2位并小于12位</label>
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback" ng-class="{'has-success' : !userForm.password.$pristine && userForm.password.$valid,
            'has-error' : !userForm.password.$pristine && userForm.password.$invalid }">
                <label for="password" class="col-sm-2 control-label">密码</label>

                <div class="col-sm-8">
                    <input type="password" class="form-control" id="password" name="password" ng-model="modal.password"
                           required ng-maxlength=20 ng-minlength=6
                           placeholder="密码">
                    <div ng-show="!userForm.password.$pristine && userForm.password.$valid">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span><label class="control-label">验证通过</label>
                    </div>
                    <div ng-show="!userForm.password.$pristine && userForm.password.$invalid">
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span><label class="control-label">密码必须大于6位并小于20位</label>
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback" ng-class="{'has-success' : !userForm.confirPassword.$pristine && userForm.confirPassword.$valid,
                'has-error' : !userForm.confirPassword.$pristine && userForm.confirPassword.$invalid }">
                <label for="confirPassword" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-8">
                    <input type="password" class="form-control" name="confirPassword" id="confirPassword" ng-model="modal.confirPassword"
                           pw-check="password"
                           placeholder="确认密码">
                    <div ng-show="!userForm.confirPassword.$pristine && userForm.confirPassword.$valid">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span><label class="control-label">验证通过</label>
                    </div>
                    <div ng-show="!userForm.confirPassword.$pristine && userForm.confirPassword.$invalid">
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span><label class="control-label">确认密码和密码不同</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="role" class="col-sm-2 control-label">角色</label>

                <div class="col-sm-8">
                    <select class="form-control" id="role" ng-model="modal.role"
                            ng-options="x for x in modal.roles">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="enable" class="col-sm-2 control-label">启用</label>

                <div class="col-sm-8">
                    <select class="form-control" id="enable" ng-model="modal.enable"
                            ng-options="x for x in modal.enables">
                    </select>
                </div>
            </div>
            <div class="box-footer col-sm-10">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" ng-click="cancel()">
                    关闭
                </button>
                <button type="button" ng-disabled="!userForm.$valid" class="btn pull-right btn-primary" ng-click="ok()">
                    {{modal.btnName}}
                </button>
            </div>
        </div>
    </form>
</div>
